import React, { useEffect, useState } from 'react'
import { Card } from 'antd'
import { getnotice } from '../../api/notice'

export default function Notice() {
  const [noticeData, setNoticeData] = useState([]) //公告数据数组
  const [notice, setNotice] = useState('') //公告渲染数据

  useEffect(() => {
    getnotice().then(res => {
      // console.log(res.list)
      setNoticeData(res.list)
    })
  }, [])
  return (
    <div
      className="notice"
      style={{
        padding: 20,
        background: '#ececec',
        display: 'flex',
        flexWrap: 'wrap',
        width: '100%',
        justifyContent: 'space-around'
      }}
    >
      {noticeData.map(item => {
        return (
          <Card
            key={item.id}
            title={item.title}
            extra={
              <>
                <a href="/" style={{ marginRight: 10 }}>
                  编辑
                </a>
                <a href="/">删除</a>
              </>
            }
            bordered={true}
            style={{ width: 300, marginTop: 20 }}
          >
            <p>
              <b>作者：</b>
              {item.author}
            </p>
            <p>
              <b>发表日期:</b>
              {item.createAt}
            </p>
            <p>
              <b>内容：</b>
              {item.content}
            </p>
          </Card>
        )
      })}
    </div>
  )
}
